<template>
    <div>
        <el-dialog v-model="props.isPop" width="478" :show-close="false">
            <template #header>
                <div class="head">
                    <div class="title">上传文件</div>
                    <div @click="onClose" class="pointer">X</div>
                </div>
            </template>
            <div class="upload-box">
                <el-upload
                    class="upload-demo"
                    drag
                    :action=action
                    :show-file-list="false"
                    :multiple="false"
                    :headers="headers"
                    :on-success="onHandleSuccess"
                >
                    <img src="../../../assets/image/uploadvideo.png" class="up-img" alt="">
                    <div class="title">
                        将文件拖到此处，或 <span class="title-active">点击上传</span>
                    </div>
                    <!-- <template #tip>
                        <div class="el-upload__tip">
                            jpg/png files with a size less than 500kb
                        </div>
                    </template> -->
                </el-upload>
            </div>
            <div class="file-box" v-if="isFile">
                <div class="flex-align">
                    <img src="../../../assets/image/file-xlsx.png" class="file-img" alt="">
                    <div>
                        <div class="title">{{ fileName }}</div>
                        <div class="size">{{ fileSize }}KB</div>
                    </div>
                </div>
                <img src="../../../assets/image/delc.png" class="delc-img" alt="" @click="onDelFile">
            </div>
            <div class="tips-box">
                已解析到<span class="blue">{{ totalNum }}</span>个手机号，自动去重<span class="origin">{{ autoRemoveNum }}</span>个，共计录入<span class="blue">{{ importNum }}</span>个手机号
            </div>
            <div class="foot-btn">
                <div></div>
                <div class="flex-align">
                    <div class="pointer" @click="onClose">取消</div>
                    <el-button class="determine-btn" type="primary" @click="onSubmit">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineEmits, computed, defineProps } from 'vue'
import baseurl from '@/api/env.ts'
import { ElMessage } from 'element-plus'
import { batchImportPhone } from '@/api/tmBlacklist/index'
const emit = defineEmits(['close', 'submit'])
const props = defineProps({
    isPop: {
        type: Boolean,
        default: false,
    }
})
const autoRemoveNum = ref(0)
const importNum = ref(0)
const totalNum = ref(0)
const isFile = ref(false)
const fileName = ref('')
const fileSize = ref(0)
const fileContent = ref([])
const action = computed(() => {
    console.log(baseurl + '/crm/telesalesBlacklist/batchImport', 'baseurl')
    return baseurl + '/crm/telesalesBlacklist/getImportData'
    
})
const headers = computed(() => {
    return {
        Authorization: 'Bearer ' + sessionStorage.getItem('token') || ''
    }
})


const onHandleSuccess = (res, uploadFile) => {
    console.log(res, '查看文件上传成功的信息')
    console.log(uploadFile, '文件本题信息')
    fileName.value = uploadFile.name
    fileSize.value = (uploadFile.size / 1024).toFixed(2)
    if (res.code === 200) {
        autoRemoveNum.value = res.data.autoRemoveNum
        importNum.value = res.data.importNum
        totalNum.value = res.data.totalNum
        fileContent.value = res.data.phoneList
        isFile.value = true
    } else { 
        ElMessage.error(res.msg)
    }
}

const onSubmit = async () => {
    if (fileContent.value.length === 0 && totalNum.value === 0) { 
        ElMessage.error('请上传文件')
        return
    }
    if (importNum.value === 0) { 
        ElMessage.error('去重后的手机号0条，请重新上传')
        return
    }
    console.log(fileContent.value, '提交')
    await batchImportPhone(fileContent.value)
    await emit('submit')
    onDelFile()
}
// 删除文件
const onDelFile = () => {
    console.log('点击了')
    autoRemoveNum.value = 0
    importNum.value = 0
    totalNum.value = 0
    fileContent.value = []
    isFile.value = false
}

// 关闭弹窗
const onClose = async () => {
    await emit('close')
}
</script>

<style scoped>
.head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        color: #3d3d3d;
        font-size: 16px;
        font-weight: 500;
    }
}
.upload-box{
    .title{
        color: #9497B1;
        font-size: 14px;
    }
    .title-active{
        color: #3E5FF5;
    }
    .up-img{
        width: 84px;
        height: 60px;
    }
}
.file-box{
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #FAFAFC;
    box-shadow: 0px 2px 6px 0px rgba(0,73,88,0.1);
    border: 1px solid #EAEAEF;
    border-radius: 4px; 
    
    .file-img{
        width: 22px;
        height: 26px;
        margin-right: 6px;
    }
    .title{
        color: #202536;
        font-size: 12px;
    }
    .size{
        color: #9497B1;
        font-size: 10px;
        margin-top: 6px;
    }
    .delc-img{
        width: 16px;
        height: 16px;
    }
}
.tips-box{
    margin-top: 12px;
    color: #565868;
    font-size: 14px;
    .blue{
        color: #3E5FF5;
        font-weight: 600;
    }
    .origin{
        color: #FF7642;
        font-weight: 600;
    }
}
.foot-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .determine-btn{
        margin-left: 32px;
        width: 66px;
    }
}
.flex-align{
    display: flex;
    align-items: center;
}
</style>
